@charset "utf-8";
@import "config";
.container .topbar .right {
    a {
        i {

            position: relative;
            &::after {
                font-size: 0;
                content: "";
                position: absolute;
                right: - setLengthByHeight(10px);
                top: - setLengthByHeight(8px);
                width: setLengthByHeight(20px);
                height: setLengthByHeight(20px);
                border-radius: 50%;
                background-color: themeColor();
                border: 1px solid #ffffff;
                -webkit-transform: scale(0.5);
                -webkit-transform-origin: top right;
                transform: scale(0.5);
                transform-origin: top right;
            }
        }
    }
}

.synopsis_data {
    font-size: 0.6rem;
    line-height: 1.3em;
    text-align: center;
    background: radial-gradient(bottom center, ellipse, #a8a6e1, #4a5fbe);
    background: url("../../images/mine/mine_bg_02.jpg") no-repeat;
    background-size: 100%;
    a {
        color: #ffffff;
    }

    .user_portrait_info {
        padding: setLengthByHeight(30px) 4%;
        height: setLengthByHeight(190px);
        .user {
            display: inline-block;
            .portrait_info {
                width: setLengthByHeight(130px);
                height: setLengthByHeight(130px);
                border: 1px solid #C1C1C1;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .user_info {
                padding-left: setLengthByHeight(20px);
                text-align: initial;
                font-size: 0.7rem;
                line-height: setLengthByHeight(130px);
                width: setLengthByHeight(200px);
                overflow: hidden;
            }
        }
        .account_info {
            display: inline-block;
            text-align: initial;
            a {
                span {
                    display: inline-block;
                    font-size: 0.5rem;
                    height: setLengthByHeight(30px);
                }
                span:first-of-type {
                    width: setLengthByHeight(220px);
                    overflow: hidden;
                }
            }
        }
    }

    .other {
        overflow: hidden;

        .item {
            float: left;
            width: 33.1%;
            letter-spacing: 0.05rem;
            background-color: rgba(0, 0, 0, 0.1);
            padding: setLengthByHeight(16px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:not(:nth-child(3n)) {
                margin-right: 0.35%;
            }

            span {
                position: relative;
            }

            em.new {
                &::after {
                    font-size: 0;
                    content: "";
                    position: absolute;
                    right: - setLengthByHeight(15px);
                    top: - setLengthByHeight(5px);
                    width: setLengthByHeight(20px);
                    height: setLengthByHeight(20px);
                    border-radius: 50%;
                    background-color: themeColor();
                    border: 1px solid #ffffff;
                    -webkit-transform: scale(0.5);
                    -webkit-transform-origin: top right;
                    transform: scale(0.5);
                    transform-origin: top right;
                }
            }

            p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.add_address {
    padding: setLengthByHeight(20px) 0;
    > a {
        display: block;
        border-top: 1px solid #C1C1C1;
        padding: 0 setLengthByHeight(20px);
        height: setLengthByHeight(88px);
        line-height: setLengthByHeight(86px);
        background: #FFFFFF;
        li {
            list-style: none;
            font-size: 0.7rem;
        }
        li:nth-of-type(2){
                width: setLengthByHeight(200px);
                height: setLengthByHeight(88px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
        }
        .bg_i {
            height: setLengthByHeight(46px);
            width: setLengthByHeight(46px);
            border-radius: 3px;
            margin-right: 3%;
            background: #f06292;
            color: #FFFFFF;
            margin-top: setLengthByHeight(20px);
            text-align: center;
            span {
                display: block;
                margin-top: - setLengthByHeight(17px);
            }
        }
        li:last-of-type {
            color: #999999;
                width: setLengthByHeight(200px);
                height: setLengthByHeight(88px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
        }
    }
    .add_bar {
        font-size: 0;
        background-color: #fefefe;
        height: setLengthByHeight(120px);
        line-height: setLengthByHeight(118px);
        border-top: 1px solid #c1c1c1;
        border-bottom: 1px solid #c1c1c1;
        white-space: nowrap;

        .item {
            display: inline-block;
            vertical-align: middle;
            width: 25%;
            text-align: center;
            line-height: normal;

            .iconfont {
                display: inline-block;
                font-size: 1.3rem;
                line-height: 1em;
                position: relative;

                em {
                    position: absolute;
                    right: -0.7em;
                    top: -0.2em;
                    font-size: 0.55rem;
                    min-width: 1.5em;
                    max-width: 2.8em;
                    height: 1.5em;
                    line-height: 1.5em;
                    background-color: themeColor();
                    color: #ffffff;
                    border-radius: 0.75em;
                    padding: 0 0.4em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            p {
                font-size: 0.55rem;
                line-height: 1.2em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 0.5em;
            }
        }

        .item.active {
            .iconfont {
                color: themeColor();
            }
        }
    }
    .more_info {
        margin-top: setLengthByHeight(20px);
        a {
            display: block;
            border-top: 1px solid #C1C1C1;
            padding: 0 setLengthByHeight(20px);
            height: setLengthByHeight(88px);
            line-height: setLengthByHeight(86px);
            background: #FFFFFF;
            .bg_i {
                height: setLengthByHeight(46px);
                width: setLengthByHeight(46px);
                border-radius: 3px;
                margin-right: 3%;
                background: #39b7ec;
                color: #FFFFFF;
                margin-top: setLengthByHeight(20px);
                text-align: center;
                span {
                    display: block;
                    margin-top: - setLengthByHeight(16px);
                }
            }
            li {
                list-style: none;
                font-size: 0.7rem;
            }
            li:last-of-type {
                color: #999999;
            }
            li:nth-of-type(2) {
                width: setLengthByHeight(500px);
                height: setLengthByHeight(88px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        a:first-of-type {
            border-bottom: 1px solid #C1C1C1;
            li:first-of-type {
                background: #83cf50;
            }
        }
        a:nth-last-of-type(2) {
            border-bottom: 1px solid #C1C1C1;
        }
        a:last-of-type {
            margin-top: setLengthByHeight(20px);
            border-bottom: 1px solid #C1C1C1;
            li:first-of-type {
                background: #f06292;
            }
        }
    }
}

.layer {
    .dialog {
        .icon_list {
            .item {
                .icon-weixin {
                    background-color: #85d16d;
                }

                .icon-pengyouquan {
                    background-color: #6dd193;
                }

                .icon-weibo {
                    background-color: #f26868;
                }

                .icon-QQ {
                    background-color: #4c88f5;
                }

                .icon-qqkongjian {
                    background-color: #f0c759;
                }

                .icon-shouji {
                    background-color: #54d3b1;
                }

                .icon-liuyan1 {
                    background-color: #ff936d;
                }

                .icon-erweima {
                    color: #000000;
                    border: setLengthByHeight(4px) solid #dde0de;
                    background-color: #ffffff;
                }

                .icon-fuzhilianjie {
                    background-color: #a8bcc8;
                }

                .icon-shichang {
                    background-color: #82cf4f;
                }
            }
        }
    }
}
